<template>
	<div>
		<div v-if="item.images" class="item">
			<div>
				<h3>{{ item.title }}</h3>
				<p>{{ item.desc }}</p>
				<div class="content">
					<van-image :src="v" alt="" v-for="(v, i) in item.images" :key="i" width="33vw" height="150" />
				</div>
				<p>创建时间：{{ item.createDate }}</p>
			</div>
		</div>
		<div v-else-if="item.vedio" class="item">
			<div>
				<h3>{{ item.title }}</h3>
				<p>{{ item.desc }}</p>
				<van-image :src="item.vedio" alt="" width="100%" height="200" />
				<p>创建时间：{{ item.createDate }}</p>
			</div>
		</div>

		<div v-else-if="item.rightImg" class="item">
			<dl>
				<dt>
					<h3>{{ item.title }}</h3>
				</dt>
				<dd>
					<p>{{ item.desc }}</p>
					<van-image :src="item.rightImg" alt="" width="150" height="150" />
				</dd>
				<dt>
					<p>创建时间：{{ item.createDate }}</p>
				</dt>
			</dl>
		</div>
	</div>
</template>


<script setup lang="ts">
import { defineProps } from 'vue'
import { ListItemState } from '@/store'
const props = defineProps<{
	item: ListItemState
}>()
</script>

<style lang="scss" scoped>
* {
	margin: 0;
	padding: 0;
}
.content {
	display: flex;
}

.item {
	padding: 10px;
	border-bottom: 1px #ccc solid;
}

dd {
	display: flex;
	p {
		flex: 1;
		margin-right: 10px;
	}
}
</style>